<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>地狗购物网-网页定位导航效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      font-size: 12px;
      line-height: 1.7;
    }
    li {
      list-style: none;
    }
    #content {
      width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    #content h1 {
      color: #0088bb;
    }
    #content .item {
      padding: 20px;
      margin-bottom: 20px;
      border: 1px dotted #0088bb;
    }
    #content .item h2 {
      font-size: 16px;
      font-weight: bold;
      border-bottom: 2px solid #0088bb;
      margin-bottom: 10px;
    }
    #content .item li {
      display: inline;
      margin-right: 10px;
    }
    #content .item li a img {
      width: 230px;
      height: 230px;
      border: none;
    }
    #menu {
      position: fixed;
      top: 100px;
      left: 50%;
      margin-left: 400px;
      width: 50px;
    }
    #menu ul li a {
      display: block;
      margin: 5px 0;
      font-size: 14px;
      font-weight: bold;
      color: #333;
      width: 80px;
      height: 50px;
      line-height: 50px;
      text-decoration: none;
      text-align: center;
    }
    #menu ul li a:hover,
    #menu ul li a.current {
      color: #fff;
      background: #0088bb;
    }
  </style>

<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    // 滚动条发生滚动时，要获取相应的值
    $(window).scroll(function () {
      var items = $("#content").find(".item");
      var menu = $("#menu");
      // 页面滚动离顶部的距离
      var top = $(document).scrollTop();
      // 滚动条现在所在位置的item id
      var currentId = ""; 
      items.each(function () {
        var m = $(this);
        // m.offset().top代表每一个item的顶部位置
        if (top > m.offset().top - 300) {
          currentId = "#" + m.attr("id");
        } else {
          return false;
        }
      });
      // 给相应楼层的a设置current，取消其他链接的current
      var currentLink = menu.find(".current");
      if (currentId && currentLink.attr("href") != currentId) {
        currentLink.removeClass("current");
        menu.find("[href=" + currentId + "]").addClass("current");
      }
    })
  });
</script>
</head>

<body>
  <div id="menu">
    <ul>
      <li><a href="#item1" class="current">1F 男装</a></li>
      <li><a href="#item2">2F 女装</a></li>
      <li><a href="#item3">3F 美妆</a></li>
      <li><a href="#item4">4F 数码</a></li>
      <li><a href="#item5">5F 母婴</a></li>
    </ul>
  </div>
  <div id="content">
    <h1>地狗购物网</h1>
    <div id="item1" class="item">
      <h2>1F 男装</h2>
      <ul>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
      </ul>
    </div>
    <div id="item2" class="item">
      <h2>2F 女装</h2>
      <ul>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
      </ul>
    </div>
    <div id="item3" class="item">
      <h2>3F 美妆</h2>
      <ul>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
      </ul>
    </div>
    <div id="item4" class="item">
      <h2>4F 数码</h2>
      <ul>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
      </ul>
    </div>
    <div id="item5" class="item">
      <h2>5F 母婴</h2>
      <ul>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
      </ul>
    </div>
  </div>
</body>
</html>